<template>
  <guat-page-layout title="活动类型">
    <template #actions>
      <guat-button-group
        :buttons="[
          {
            text: '批量删除',
            internal: $config.$button.RLR,
            permission: $permission.ACTIVITY_TYPE_DEL,
            disabled: true,
          },
          {
            text: '新增活动类型',
            internal: $config.$button.PLR,
            permission: $permission.ACTIVITY_TYPE_ADD,
            onClick: () => setModalVisible(true),
          },
        ]"
      />
    </template>
    <guat-activity-type-table />
    <guat-new-type-modal title="新增活动类型" @before-ok="validateForm" @ok="onConfirmAdd">
      <guat-new-type-form />
    </guat-new-type-modal>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { createTypeTableColumns } from "../table-config";
import { typeAddFormItemConfig } from "../form-config";

const [GuatNewTypeForm] = useForm(typeAddFormItemConfig);
const [GuatNewTypeModal, { setModalVisible }] = useModal();
const [GuatActivityTypeTable, { setTableData }] = useTable(
  createTypeTableColumns({
    del: handleOnDelete,
    upd: handleOnUpdate,
  })
);
const { warning } = useModalNotice();
const { success } = useMessage();

function handleOnDelete(record: any) {
  warning({
    title: "删除提示",
    content: `请确认是否要删除 ${record.type} ?`,
  });
}

function handleOnUpdate(_record: any) {
  // setFormValue(record);
  setModalVisible(true);
}

async function validateForm(_done: (closed: boolean) => void) {
  // done(!(await validate()));
}

function onConfirmAdd() {
  // api
  success("新增活动类型成功");
}

onMounted(() => {
  setTableData([
    {
      type: "竞赛",
      time: "2023-04-10 20:23:22",
      status: "启用",
    },
    {
      type: "算法",
      time: "2023-04-10 20:23:22",
      status: "禁用",
    },
  ]);
});
</script>

<style scoped></style>
